Смена текста по клику ( 3 варианта)

 Привет, друзья. Вопрос был от читателя, как сделать смену текста на странице, когда при нажатие на кнопку один текст меняется на другой и обратно.  Вариант достаточно распространённый и, часто встречающийся. Покажу несколько вариантов, как по клику быстро сменить текст на другой .  

Первые 2 будут просто менять текст, не возвращая прежний. Все пробуем в этом редакторе для наглядности. Копируйте код и вставляем в поле для просмотра. 

1. Вариант. Использовать подготовленный текст, кнопку, с помощью которой будет осуществляться замена, и скрипт JS.

<p class="par">Здесь ваш тестовый текст</p>

<button onclick="fu()" type="text">Нажми на меня и посмотри .</button>

<script>

function fu(){

    var par = document.querySelector('.par');

    par.innerHTML = 'Получилось!!!! УРА, УРА, УРА';

}

</script>

2. Вариант. Смена текущего текст без кнопки.

<h1 onclick="changeText(this)">Попробуй кликнуть на меня!</h1>

<script>

function changeText(id) {

    id.innerHTML = "Получилось ! УРА, УРА, УРА";

}

</script>

3. Вариант. Как заменить содержимое блока на другое при клике, а при повторном, обратно.

<script type='text/JavaScript'>

     function verocultar(cual) {

          var c=cual.nextSibling;

          if(c.innerHTML=='второй текст второй текст') {

               c.innerHTML='первый текст первый текст';

          } else {

               c.innerHTML='второй текст второй текст';

          }

          return false;

     }

</script><a onclick="return verocultar(this);"

     href="javascript:void(0);">поменяем</a><div>

....... текст текст текст.......

</div>

Есть ещё вариант без кнопки. Работает туда и обратно, один раз

  

<script>function changeText(){ document.getElementById('boldStuff').innerHTML = (document.getElementById('boldStuff').innerHTML == 'Нажать') ? 'Вот вам и второй текст' : 'А это снова первый';</script>
<span id='boldStuff' onclick="changeText();">Жмём</span>

В каждом из вариантов, соответственно, меняйте текстовые поля на свои. Любой из кодов устанавливайте в сообщении в формате HTML.

Хочется надеяться, что именно это имел в виду читатель. Может и Вам пригодится.

✱✱✱✱✱✱

Дорогие, друзья. Скорее всего это последний пост в уходящем 2020 году. Всем спасибо за внимание к моим шпаргалкам. Всем желаю счастливого Нового года, незабываемых и радостных праздников. Крепкого здоровья и успехов во всех делах. Счастья Вам и Вашим близким. 

С наступающим Новым 2021 годом!!!

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email